Vue.component('register-stepper', {
	data: function() {
		return {
			name: 'register-stepper',
			steps: [{
					index: '1',
					title: '身份信息认证'
				},
				{
					index: '2',
					title: '绑定银行卡',
				},
				{
					index: '3',
					title: '人脸识别',
				}
			]
		}
	},
	props: ["step"],
	template: `
		<div :class="name + '-wrapper'">
			<div :class="name + '-content'">
				<div :class="name + '-step-item'" v-for="item in steps">
					<div 
						:class="name + '-step-line'" 
						v-show="item.index !== '1'"
						:style="{backgroundColor: item.index <= step ? '#E66D4D': '#F5F5F5'}"
					></div>
					<span 
						:class="name + '-step-number'"
						:style="{background: item.index <= step ? '#E66D4D': '#F5F5F5'}"
					>{{item.index}}</span>
					<div 
						:class="name + '-step-line'" 
						:style="{backgroundColor: item.index <= step - 1 ? '#E66D4D': '#F5F5F5'}"
						v-show="item.index !== '3'"
					></div>
				</div>
			</div>
			<div :class="name + '-description'">
				<p 
					v-for="item in steps" 
					:key="item.index"
					:style="{color: item.index <= step ? '#666666': '#F5F5F5'}"
				>
					{{item.title}}
				</p>
			</div>
		</div>
	`
})